<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顶部和底部</title>
    <script src="/js/top.js"></script>
    <link rel="stylesheet" href="/css/u-reset.min.css">
    <link rel="stylesheet" href="/css/top-bottom.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 内宽 -->
        <div class="maxWidth">
            <ul class="bigul">
                <% tree.forEach((nav1,index)=>{ %>
                <% if(index == 3){ %>
                <li class="logobox">
                    <a href="/">
                        <img src="/imgs/logo.png" alt="nutshop">
                    </a>
                </li>
                <% } %>
                <li>
                    <!-- 标题栏 -->
                    <a href="<%= nav1.url %>"><%= nav1.title %></a>
                    <!-- 下拉隐藏框 -->
                    <div class="down-select">
                        <ul>
                            <% if(nav1.children && nav1.children.length){ %>
                            <% nav1.children.forEach(nav2=>{ %>
                            <li>
                                <a href="<%= nav2.url %>"><%= nav2.title %></a>
                                <% if(nav2.children && nav2.children.length){ %>
                                <b class="add"></b>
                                <div class="add-ul">
                                <% nav2.children.forEach(nav3=>{ %>
                                    <p>
                                        <a href="<%= nav3.url %>"> - <%= nav3.title %></a>
                                    </p>
                                <% }) %>
                                </div>
                                <% } %>
                            </li>
                            <% }) %>
                            <% } %>
                        </ul>
                    </div>
                </li>
                <% }) %>
            </ul>
        </div>
        <!-- 语言选择  -->
        <div class="top-right">
            <img src="/imgs/top-search.png" alt="搜索">
            <img src="/imgs/world.png" alt="">
            <span>中国</span>
            <em></em>
            <span>En</span>
        </div>
        <!-- 点击出现的内容 -->
        <div class="search">
            <div class="maxWidth">
                <form action="#">
                    <input type="text" placeholder="请输入关键字" name="color">
                    <button></button>
                </form>
                <img src="/imgs/close.png" alt="">
            </div>
        </div>
        <div class="world">
            <span>中国</span>
            <span>新加坡</span>
        </div>
    </div>
    <div class="middle"></div>
    <div class="footer">
        <div class="up">
            <div class="maxWidth bottom1">
                <dl>
                    <dt><a href="#">关于海底捞</a></dt>
                    <dd><a href="#">火锅文化</a></dd>
                    <dd><a href="#">品牌故事</a></dd>
                    <dd><a href="#">经营理念</a></dd>
                    <dd><a href="#">社会责任</a></dd>
                    <dd><a href="#">媒体中心</a></dd>
                </dl>
                <dl>
                    <dt><a href="">海底捞美食</a></dt>
                    <dd><a href="">锅底</a></dd>
                    <dd><a href="">涮菜</a></dd>
                    <dd><a href="">特色蘸料</a></dd>
                    <dd><a href="">小吃甜品</a></dd>
                    <dd><a href="">特色饮品</a></dd>
                    <dd><a href="">食品安全</a></dd>
                </dl>
                <dl>
                    <dt><a href="">服务中心</a></dt>
                    <dd><a href="">门店搜索</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">欢乐卡</a></dd>
                    <dd><a href="">海底捞外卖</a></dd>
                </dl>
                <dl>
                    <dt><a href="">投资者关系</a></dt>
                    <dd><a href="">公司治理</a></dd>
                    <dd><a href="">招股文件</a></dd>
                    <dd><a href="">公告通函</a></dd>
                    <dd><a href="">业绩报告</a></dd>
                    <dd><a href="">投资者联络</a></dd>
                </dl>
                <dl>
                    <dt><a href="">加入海底捞</a></dt>
                    <dd><a href="">门店招聘</a></dd>
                </dl>
                <dl>
                    <dt><a href="">海底捞会员</a></dt>
                    <dd><a href="">关于会员</a></dd>
                    <dd><a href="">会员权益</a></dd>
                    <dd><a href="">会员须知</a></dd>
                    <dd><a href="">隐私政策</a></dd>
                </dl>
                <dl>
                    <dt><a href="">相关网站</a></dt>
                    <dd><a href="">新店拓展平台</a></dd>
                    <dd><a href="">采购招标平台</a></dd>
                    <dd><a href="">颐海国际控股有限公司</a></dd>
                    <dd><a href="">蜀海供应链</a></dd>
                    <dd><a href="">北京微海管理咨询有限公司</a></dd>
                </dl>
            </div>
        </div>
        <div class="down">
            <div class="maxWidth bottom2">
                <p>
                    © 2019 版权所有 海鸿达（北京）餐饮管理有限公司
                    <em></em>
                    <a href="#">京ICP备 18016421号-1</a>
                </p>
                <p>
                    <a href="#">使用条款</a>
                </p>
                <div>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
    </div>
</body>
</body>
</html>